/**
 * Copyright (c) 2024 Huawei Technologies Co., Ltd.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE-MIT file in the root directory of this source tree.
 */

import React, { useState } from 'react';
import { SafeAreaView, View, Text, Button, Alert, StyleSheet, Image, TextInput, TouchableOpacity } from 'react-native'
const phoneImg = require('./harmony/entry/src/main/resources/rawfile/assets/phone.png');
const pwdImg = require('./harmony/entry/src/main/resources/rawfile/assets/password.png');
const checkedImg = require('./harmony/entry/src/main/resources/rawfile/assets/checked.png');

const App: React.FC = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [privacy, setPrivacy] = useState<boolean>(false)

  const handleLogin = () => {
    try {
      Alert.alert('account', `username: ${username}${'\n'}password: ${password}`);
    } catch (e) {
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <Image style={styles.bg} source={require('./harmony/entry/src/main/resources/rawfile/assets/login-bg.png')}></Image>
      <View style={styles.main}>
        <Text style={styles.title1}>您好</Text>
        <Text style={styles.title2}>欢迎来到XXXXXX</Text>
        <View style={styles.iptContainer}>
          <Image style={styles.iptIcon} source={phoneImg}></Image>
          <TextInput
            placeholder='请输入手机号/身份证号/卡号'
            style={styles.username}
            onChangeText={setUsername}
            value={username}
          />
        </View>
        <View style={styles.iptContainer}>
          <Image style={styles.iptIcon} source={pwdImg}></Image>
          <TextInput
            secureTextEntry={true}
            placeholder='请输入登录密码'
            style={{ ...styles.username, ...styles.password }}
            onChangeText={setPassword}
            value={password}
          />
        </View>
        <View style={styles.privacy}>
          {privacy ?
            <TouchableOpacity onPress={() => setPrivacy(false)}>
              <Image style={{ width: 20, height: 20 }} source={checkedImg} />
            </TouchableOpacity> :
            <TouchableOpacity onPress={() => setPrivacy(true)}>
              <View style={{ width: 20, height: 20, borderRadius: 10, borderWidth: 1, borderColor: "#999" }} onResponderMove={() => setPrivacy(true)} />
            </TouchableOpacity>
          }
          <View style={{ flexDirection: "row", flexWrap: "wrap", marginLeft: 10 }}>
            <Text style={{ fontSize: 16 }}>我已阅读并同意<Text style={{ color: "blue" }}>《xxxxxx用户隐私协议》、《xxxxxx用户隐私政策》</Text></Text>
          </View>
        </View>
        <View style={styles.buttonContainer}>
          <Button title="登录" onPress={handleLogin} />
        </View>
      </View>
    </SafeAreaView>
  );

};

const styles =
  StyleSheet.create({
    container: {
      width: '100%',
      height: '100%',
      backgroundColor: '#F1F7FF',
    },
    bg: {
      width: '100%',
      height: '60%',
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      resizeMode: 'cover',
    },
    main: {
      marginTop: 60,
      padding: 20,
      borderboxSizing: 'border-box',
    },
    title1: {
      fontWeight: '700',
      fontSize: 42,
    },
    title2: {
      fontSize: 22,
      marginTop: 8,
      color: '#666',
      marginBottom: 30,
    },
    iptContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      borderRadius: 8,
      height: 60,
      marginTop: 20,
      backgroundColor: '#fff'
    },
    iptIcon: {
      width: 30,
      height: 30,
      marginLeft: 10,
      marginRight: 10,
      borderRadius: 5,
      resizeMode: 'contain',
    },
    username: {
      height: 50,
      width: '100%',
      fontSize: 18,
      color: '#666',
    },
    password: {

    },
    privacy: {
      width: "100%",
      flexDirection: "row",
      marginTop: 40,
      alignItems: "flex-start"
    },
    buttonContainer: {
      width: '100%',
      height: 50,
      marginTop: 30,
      backgroundColor: '#007AFF',
      borderRadius: 25,
      justifyContent: 'center',
      alignItems: 'center',
    },
  });

export default App;